<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	
	<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理页面</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vue/vue.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="js/layui.css"> -->
<script type="text/javascript" src="js/laypage.js"></script>
<link rel="stylesheet" type="text/css" href="css/laypage.css">

<style type="text/css">
   #searchShow{
      display:none;
   }
</style>

<script type="text/javascript">
  $(function(){
	  show(1);
  })
</script>

</head>
<body>
	<div id="app2">
		<form  role="form" class="form-horizontal">
			<div class="form-group">
				<div class="col-sm-2">
					<input type="text" id="realName" class="form-control" name="realName"
						placeHolder="请输入用戶姓名" />
					<!-- <a role="button" href="#" class="btn btn-danger btn-sm active" >搜索</a> -->
				</div>
				<input type="button" id="search" name="realName" class="btn btn-danger btn-sm active" value="搜索" />
			</div>
		</form>
		   
		   <!-- 后台搜索用户数据然后展示 -->
		   <div id="searchShow">
			 <table>
				<thead>
					<tr>
						<th><input type="checkbox" /></th>
						<th>真实姓名</th>
						<th>性别</th>
						<th>邮箱</th>
						<th>手机号</th>
						<th>身份状态</th>
						<th>发帖状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
                     <tr v-for="user in userInfo2">
                        <td><input type="checkbox" /></td>  
                        <td>{{user.realName}}</td>  
                        <td>{{user.sex}}</td>  
                        <td>{{user.email}}</td>  
                        <td>{{user.phone}}</td>  
                        <td>{{user.status}}</td>  
                        <td>{{user.postState}}</td>  
                        <td>
                           <input type="button" name='sub' class="btn btn-danger active" onclick="updateData(this)" 
                           id='btn' data-toggle="modal" data-target="#myModal" value="修改" />
                           <a :href="'deleteUser?uid='+user.uid">删除</a>
                        </td>
                     </tr> 
                     
				</tbody>
			</table>
		</div>	
	</div>
	
	<!-- 后台首页面查询即展示用户数据 -->
	<div id="app">
	 
	   <table>
				<thead>
					<tr>
						<th><input type="checkbox" /></th>
						<th>用户ID</th>
						<th>真实姓名</th>
						<th>性别</th>
						<th>邮箱</th>
						<th>手机号</th>
						<th>身份状态</th>
						<th>发帖状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
                     <tr v-for="user in userInfo">
                        <td><input type="checkbox" /></td>  
                        <td>{{user.uid}}</td>
                        <td>{{user.realName}}</td>  
                        <td>{{user.sex}}</td>  
                        <td>{{user.email}}</td>  
                        <td>{{user.phone}}</td>  
                        <td>{{user.status}}</td>  
                        <td>{{user.postState}}</td>
                        
                        <td>
                           <input type="button" name='sub' class="btn btn-danger active" onclick="updateData(this)" 
                           id='btn' data-toggle="modal" data-target="#myModal" value="修改" />
                           <a :href="'deleteUser?uid='+user.uid">删除</a>
						</td>
						
                        <!-- <td>
                           <a :href="'updateUser?uid='+user.uid">修改</a>
                        </td> -->
                     </tr> 
                     
				</tbody>
			</table>
			<div>
				<ul id="page">
				</ul>
			</div>   
	</div>
	
	<!-- 模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button> 
					<h4 class="modal-title">Modal title</h4>
				</div>
				<div class="modal-body">
					    <div class="form-group">
							<label for="realName" class="control-label">账号:</label>
							<input type="text" class="form-control" name="uid" id="uid" placeholder="账号">
						</div>
						<div class="form-group">
							<label for="realName" class="control-label">姓名:</label>
							<input type="text" class="form-control" name="realName" id="realName2" placeholder="姓名">
						</div>
						<div class="form-group">
							<label for="message-text" class="control-label">身份状态:</label>
							<input type="text" class="form-control" name="status" id="status" placeholder="身份状态">
						</div>
						
						<div class="form-group">
							<label for="message-text" class="control-label">发帖状态:</label>
							<input type="text" class="form-control" name="postState" id="postState" placeholder="发帖状态">
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="update()">Save changes</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->
</body>

<script type="text/javascript">

	var vm = new Vue({
		el : '#app',
		data : {
			userInfo : "",
		},
	});
    
	
	function show(currentPage) {
		$.ajax({
			url : 'query3.se',
			type : 'post',
			data : {
				currentPage : currentPage
			},
			dataType : 'json',
			/* async : false, */ 
			success : function(result) {
				vm.userInfo = result.userList;
				laypage({
					cont : $("#page"), //容器
					pages : result.totalPages, //总页数
					curr : currentPage, //当前页
					skin : 'molv', //皮肤
					skip : true,
					first : '首页',
					last : '尾页',
					groups : 3, //多少页进行分组
					jump : function(obj, first) { /* //触发分页后的回调 */
						if (!first) { //一定要加此判断，否则初始时会无限刷新
							show(obj.curr); //获取当前页
						}
					}
				});
			}
		})
	}
	
	//根据用户姓名模糊查询
	 var vm2=new Vue({
		el:'#app2',
		data:{
			userInfo2:"",
		}
	}); 
	
	
		  $("#search").click(function(){
			  var $app=$("#app");
			  if($app.css("display")=="block")
				  $app.css("display","none");
			  
			  var $searchShow=$("#searchShow");
			  if($searchShow.css("display")=="none")
				  $searchShow.css("display","block");
			  
			   var realName=$("#realName").val();
			  /* if(realName==""){
				  show(1);
			  }  */
			    $("#realName").focus(function(){
				  if(realName==null){
					  show(1);
				  }
			  }) 
			  
			  
			  alert(realName);
			  $.ajax({
				  url:'query4.se',
				  type:'post',
				  data:{realName:realName},
				  dataType:'json',
				  success:function(result){
					  alert(result);
					  vm2.userInfo2=result;
				  }
			  });
		  })
	
		  
		  //修改身份状态和发帖状态
		  function updateData(obj){
			  var uid=$(obj).parent().siblings("td").eq(1).text();
			  var realName=$(obj).parent().siblings("td").eq(2).text();
			  alert(realName);
			  var status=$(obj).parent().siblings("td").eq(6).text();
			  var postState=$(obj).parent().siblings("td").eq(7).text();
			  $("#uid").val(uid);
			  $("#realName2").val(realName);
			  $("#status").val(status);
			  $("#postState").val(postState);
		  }
		  
		  function update(){
			  var uid=$("#uid").val();
			  var realName=$("#realName2").val();
			  var status=$("#status").val();
			  var postState=$("#postState").val();
			  $.ajax({
				  type:'post',
				  dataType:'json',
				  url:'updateUser.on',
				  data:{
					  uid:uid,
					  realName:realName,
					  status:status,
					  postState:postState
				  },
				  success:function(){
					  alert("成功！");
				  }
			  })
		  }
</script> 
</html>






